<template>
  <div id="enrollmentPlan" class="main">
    <div v-if="isVIP != 0" v-loading="majorLineLoading">
      <div class="select-box">
        <el-select
          no-data-text="暂无数据"
          v-model="selecttextDX6"
          placeholder=" "
          @change="yearChange"
          style="width: 90px"
        >
          <el-option
            v-for="item in popArrDX6"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>

        <el-select
          no-data-text="暂无数据"
          @change="subjectChange"
          v-model="selecttextDX7"
          placeholder=" "
          style="width: 90px; margin: 0 10px"
        >
          <el-option
            v-for="item in popArrDX7"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>

        <el-select
          no-data-text="暂无数据"
          v-model="selecttextDX8"
          placeholder=" "
          @change="levelChange"
          style="width: 90px"
        >
          <el-option
            v-for="item in popArrDX8"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="page-content-list">
        <div class="mb20">
          <div
            style="
              height: 36px;
              position: sticky;
              top: 116px;
              left: 0;
              background: #fff;
            "
          >
            <!-- style="top: 164px; width: 1160px" -->
            <table class="my-table head">
              <thead class="my-table-head">
                <tr>
                  <th width="80">代码</th>
                  <th class="text-left pl20">专业名称</th>
                  <!---->
                  <th width="80">选科</th>
                  <!---->
                  <!-- <th width="100">选考要求</th> -->
                  <th width="80">学制</th>
                  <th width="80">学费</th>
                  <th width="80">招生人数</th>
                </tr>
              </thead>
            </table>
          </div>

          <table class="my-table body">
            <tbody class="my-table-body">
              <tr v-for="(item, index) in planList" :key="index">
                <td
                  width="80"
                  class="text-center"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <span class="cntext">{{ item.code || '-' }}</span>
                </td>
                <td
                  class="pt20 pb20 pl20"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <div class="cntext f14">{{ item.text || '-' }}</div>
                  <div class="cntext f12">{{ item.remark || '-' }}</div>
                </td>
                <!-- <td width="80" class="text-center">
                <span class="cntext">{{ item.chooseSubjectText || "-" }}</span>
              </td> -->
                <td
                  width="80"
                  class="text-center"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <span class="cntext">{{
                    item.chooseSubjectText || '-'
                  }}</span>
                </td>
                <td
                  width="80"
                  class="text-center"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <span class="cntext">{{ item.learnYear || '-' }}</span>
                </td>
                <td
                  width="80"
                  class="text-center"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <span class="cntext">{{ item.cost || '-' }}</span>
                </td>
                <td
                  width="80"
                  class="text-center"
                  :class="item.dataType == 'c' ? 'isHeader' : ''"
                >
                  <span class="cntext">{{ item.planNum || '-' }}</span>
                </td>
              </tr>
            </tbody>
          </table>

          <div
            v-if="planList.length <= 0"
            style="text-align: center; color: #909399e0; margin-top: 50px"
            class="f14"
          >
            暂无数据
          </div>
        </div>
      </div>
    </div>
    <noIsVIP v-else></noIsVIP>
    <div>
      <tipsCard :tipsData="tipsData" :type="true" />
    </div>
  </div>
</template>

<script setup>
import noIsVIP from '@/components/noIsVip/noIsVip';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import tipsCard from '@/components/TipsCard';

import {
  getSchoolPlan,
  getSchoolPlanFilter,
  noteDesc,
} from '@/api/scoreline/scoreline';
const store = useStore();
const route = useRoute();

const majorLineLoading = ref(false);
const popArrDX6 = ref([]);
const popArrDX7 = ref([]);
const popArrDX8 = ref([]);
const selecttextDX6 = ref('');
const selecttextDX7 = ref('');
const selecttextDX8 = ref('');
const planList = ref('');
const allYearData = ref([]);
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});

const tipsData = ref({
  isShowIcon: true,
  tipsList: [],
  portDescription: '',
});

const fetchNoteDesc = () => {
  // 获取分数线描述信息
  noteDesc({
    type: 'collegePlanDescription',
    pid: store.getters.user.userInfo.pid,
  }).then((res) => {
    tipsData.value.portDescription = res.data.data.collegePlanDescription;
  });
};
fetchNoteDesc();

const fetchSchoolPlan = () => {
  let reqData = {
    pid: store.getters.user.userInfo.pid || '',
    collegeCode: route.query.collegecode || '',
    year: selecttextDX6.value,
    course: selecttextDX7.value,
    batch: selecttextDX8.value,
  };
  majorLineLoading.value = true;
  getSchoolPlan(reqData)
    .then((res) => {
      if (res.data.code == 20000) {
        planList.value = res.data.data;
        majorLineLoading.value = false;
      } else {
        majorLineLoading.value = false;
      }
    })
    .catch(() => {
      majorLineLoading.value = false;
    });
};
const fetchSchoolPlanFilter = () => {
  getSchoolPlanFilter({ pid: store.getters.user.userInfo.pid }).then((res) => {
    if (res.data.code == 20000) {
      popArrDX6.value = [];
      popArrDX7.value = [];
      popArrDX8.value = [];
      allYearData.value = res.data.data.years;
      res.data.data.years.forEach((item) => {
        popArrDX6.value.push(item.year);
      });
      popArrDX7.value = res.data.data.years[0].course;
      popArrDX8.value = res.data.data.years[0].batch;
      selecttextDX6.value = popArrDX6.value[0] || '';
      selecttextDX7.value = popArrDX7.value[0] || '';
      selecttextDX8.value = popArrDX8.value[0] || '';
      fetchSchoolPlan();
    }
  });
};
const yearChange = (val) => {
  let resFilter = allYearData.value.filter((v) => v.year == val);
  popArrDX7.value = resFilter[0].course;
  selecttextDX7.value = popArrDX7.value[0];
  popArrDX8.value = resFilter[0].batch;
  selecttextDX8.value = popArrDX8.value[0];
  fetchSchoolPlan();
};
const subjectChange = (val) => {
  selecttextDX7.value = val;
  fetchSchoolPlan();
};
const levelChange = (val) => {
  selecttextDX8.value = val;
  fetchSchoolPlan();
};

if (isVIP.value != 0) {
  fetchSchoolPlanFilter();
}
</script>

<style lang="scss" scoped>
#enrollmentPlan {
  margin-bottom: 150px;
  .my-tab {
    position: sticky;
    top: 45px;
    left: 0;
    padding-bottom: 10px;
    background: #fff;
    z-index: 999;
  }
}
.my-table {
  width: 100%;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  border-collapse: collapse;
  border-spacing: 0;
}
.my-table-head {
  border-left: 1px solid #e8e8e8;
  width: 100%;
}
.my-table .my-table-head th {
  border-bottom: 1px solid #e8e8e8;
  padding: 9px 0;
  font-size: 12px;
  color: #86909c;
}
.my-table .my-table-body td {
  font-size: 12px !important;
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
}
.text-left {
  text-align: left !important;
}
.my-select {
  background: #fff;
  padding: 20px 0;
}
.body {
  border-top: none;
}
#my-table {
  position: sticky;
  top: 95px;
  left: 0;
}
.select-box {
  position: sticky;
  top: 45px;
  left: 0;
  background: #fff;
  padding: 20px 0;
}
.active {
  color: var(--color-text);
}
.isHeader {
  background-color: #f0f0f0;
  font-weight: bold;
}
</style>
